<template>
  <div>
    <!-- Navbar -->
    <navBar title="图文问诊"></navBar>
    <!-- 在线医生 -->
    <div class="head">
      <img class="photo" src="@/assets/upload/doctor-portrait@2x.png" alt="" />
      <div class="online_doctor">
        <div class="online">在线医生</div>
        <p class="desc">
          请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
        </p>
        <span class="private">
          <img class="safety" src="@/assets/upload/antd-Icon@2x.png" alt="" />
          内容仅医生可见
        </span>
      </div>
    </div>
    <!-- 病情描述 -->
    <div class="Description">
      <van-field
        v-model="description.message"
        rows="3"
        type="textarea"
        placeholder="请详细描述您的病情，病情描述不能为空"
      />
      <div class="radio">
        <div class="question">本次患病多久了?</div>
        <div class="options">
          <span
            v-for="item in options"
            :key="item.id"
            class="option"
            :class="{active:description.illnessTime === item.title}"
            @click="onOption(item.title)"
            >{{ item.title }}</span
          >
        </div>
      </div>
      <div class="radio">
        <div class="question">此次病情是否去医院就诊过?</div>
        <div class="options">
          <span class="option" :class="{active:description.seeDoctor === '就诊过'}" @click="description.seeDoctor = '就诊过'"
            >就诊过</span
          >
          <span class="option" :class="{active:description.seeDoctor === '没就诊过'}" @click="description.seeDoctor = '没就诊过'"
            >没就诊过</span
          >
        </div>
      </div>
      <div class="uploader">
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="9"
          :max-size="5 * 1024 * 1024"
          :after-read="afterRead"
        >
          <div class="upload">
            <img class="img" src="@/assets/upload/upload-pic@2x.png" alt="" />
            <span class="text">上传图片</span>
          </div>
        </van-uploader>
        <span v-if="!fileList.length" class="astrict"
          >上传内容仅医生可见,最多9张图,最大5MB</span
        >
      </div>
      <van-button :class="{ nextStep: isAll }" color="#16c2a3" block round @click="onNextStep"
        >下一步</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { upload } from '@/api'
import { showToast, showConfirmDialog } from 'vant'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

// 症状数据
const description = ref(store.state.illness.illnessInfo)

if (description.value.message) {
  showConfirmDialog({
    title: '温馨提示',
    message:
        '是否恢复您之前填写的病情信息呢?'
  })
    .then(() => {
      // on confirm
    })
    .catch(() => {
      // on cancel
      description.value = {
        message: '', // 病情描述
        illnessTime: '', // 患病时间
        seeDoctor: '' // 是否就诊过
      }
    })
}

// 患病多久了
const options = [
  { id: 0, title: '一周内' },
  { id: 1, title: '一月内' },
  { id: 2, title: '半年内' },
  { id: 3, title: '大于半年' }
]
const onOption = (title) => {
  description.value.illnessTime = title
}

// 上传图片
const pictures = ref([])
const fileList = ref([])
const afterRead = async (file) => {
  // 此时可以自行将文件上传至服务器
  const { data } = await upload(file.file)
  pictures.value.push(data)
}

// 下一步
const onNextStep = () => {
  if (!description.value.message) {
    showToast('请输入病情描述')
  } else if (!description.value.illnessTime) {
    showToast('请选择症状持续时间')
  } else if (!description.value.seeDoctor) {
    showToast('请选择是否已经就诊')
  } else {
    store.commit('illness/setIllnessInfo', description.value)
    store.commit('illness/setPictures', pictures.value)
    router.push({
      path: '/my/patient',
      query: {
        isChange: 1
      }
    })
  }
}

// 监听症状描述是否全部填写
const isAll = ref(true)
watch(
  description,
  (newValue) => {
    if (newValue.message && newValue.illnessTime && newValue.seeDoctor) {
      isAll.value = false
    } else {
      isAll.value = true
    }
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
// 在线医生
.head {
  display: flex;
  padding: 30px;
  margin-top: 90px;
  border-bottom: 1px solid #f8f9fa;
  .photo {
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 50%;
    width: 98px;
    height: 98px;
  }
  .online_doctor {
    color: #6f6f6f;
    .online {
      font-size: 32px;
      color: #121826;
    }
    .desc {
      padding: 20px;
      margin: 20px 0;
      background-color: #f6f7f9;
      font-size: 26px;
    }
    .private {
      font-size: 20px;
      .safety {
        vertical-align: middle;
        width: 26px;
        height: 26px;
      }
    }
  }
}

// 病情描述
.Description {
  padding: 30px;
  .van-field {
    margin-bottom: 30px;
    padding: 0;
    &::after {
      content: unset;
    }
  }
  .radio {
    margin-bottom: 56px;
    font-size: 28px;
    .question {
      margin-bottom: 30px;
      color: #6f6f6f;
    }
    .options {
      display: flex;
      .option {
        padding: 12px 28px;
        margin-right: 20px;
        border-radius: 10px;
        border: 1px solid #f6f7f9;
        background-color: #f6f7f9;
        color: #3c3e42;
      }
      .active{
        border: 1px solid #16c2a3;
        background-color: #eaf8f6;
      }
    }
  }
  .uploader {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    .upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f7f8fa;
      padding: 30px;
      margin-right: 20px;
      border-radius: 20px;
      color: #969799;
      font-size: 24px;
      .img {
        margin-bottom: 30px;
        width: 54px;
        height: 40px;
      }
    }
    ::v-deep .van-uploader__preview-delete {
      top: -13px;
      left: -13px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      background-color: #16c2a3;
      .van-uploader__preview-delete-icon {
        top: 2px;
        left: -3px;
        font-size: 36px;
      }
    }
    ::v-deep .van-image {
      border-radius: 20px;
    }
    .astrict {
      font-size: 23px;
      color: #c3c3c5;
    }
  }
  .nextStep {
    border: 0;
    background-color: #fafafa !important;
    color: #d9dbde !important;
  }
}

</style>
